<template>
  <div class="classlist">
    <van-index-bar>
      <div v-for="(v, i) in list" :key="i">
        <van-index-anchor :index="v.letter">{{ v.letter }}</van-index-anchor>
        <van-cell
          v-for="(item, inde) in v.children"
          :key="inde"
          @click="goTodetail(v)"
        >
          {{ item.title }}
        </van-cell>
      </div>
    </van-index-bar>
    <van-popup
      v-model="show"
      position="right"
      :style="{ height: '100%', width: '70%' }"
    >
    <dl v-for="v in newlister" :key="v.id" class="dlitem" @click="goDetail(v)">
        <dt>
            <img :src="v.url" alt="">
        </dt>
        <dd>
            {{v.title}}
        </dd>
    </dl>
    </van-popup>
  </div>
</template>

<script>
import {mapActions} from 'vuex'
export default {
  name: "Classlist",
  props: {
    list: [],
    
  },
  data() {
    return {
      show: false,
      newlister:[],
      id:""
    };
  },
  computed: {
    //   ...mapState(['list'])
  },
  mounted() {
    // console.log(this.list);
    
  },

  methods: {
      ...mapActions(["GET_ITEM"]),
    goTodetail(item) {
      //   console.log(item);
      this.show = true;
      this.newlister = item.children
    //   console.log(this.newlister);
    },
    goDetail(item){
        this.GET_ITEM(item)
        this.$router.push('/detail')
    }
  },
  created() {},
};
</script>

<style lang="scss" scoped>
.dlitem{
    width: 100%;
    height: 120px;
    padding: 5px;
    display: flex;
}
</style>